<template>
	<div class="content">
		<Input v-model="name" :placeholder="$t('ivcs.plname')" style="width: 90%;margin-top: 10px"></Input>
		<Input v-model="id" :placeholder="$t('ivcs.plidcard')" style="width: 90%;margin-top: 10px"></Input>
		<Input v-model="mobile" :placeholder="$t('ivcs.plmobile')" style="width: 90%;margin-top: 10px"></Input>
		<Select v-model="category" class="select">
			<Option v-for="item in categoryList" :value="item.value" :key="item.value">{{ item.label }}</Option>
		</Select>
		<Input v-model="address" :placeholder="$t('ivcs.pladdress')" style="width: 90%;margin-top: 10px"></Input>
		<Input v-model="company" :placeholder="$t('ivcs.plcompany')" style="width: 90%;margin-top: 10px"></Input>
	</div>
</template>

<script>
export default {
	name: 'Userinfo',
	data() {
		return {
			name: '',
			mobile: '',
			id: '',
			category: '',
			address: '',
			company: '',
			categoryList: []
		};
	},
	computed: {},
	mounted() {
		this.categoryList = [
			{
				value: this.$t('ivcs.personalloan'),
				label: this.$t('ivcs.personalloan')
			},
			{
				value: this.$t('ivcs.businessloan'),
				label: this.$t('ivcs.businessloan')
			},
			{
				value: this.$t('ivcs.smallloan'),
				label: this.$t('ivcs.smallloan')
			}
		];
	},

	methods: {
		clearData() {
			this.name = null;
			this.mobile = null;
			this.id = null;
			this.address = null;
			this.company = null;
			this.address = null;
			this.category = null;
		}
	}
};
</script>

<style scoped>
.content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	width: 100%;
	height: 280px;
	background: rgba(255, 255, 255, 1);
	box-shadow: 5px 7px 49px 5px rgba(44, 137, 234, 0.13);
}

.select {
	width: 90%;
	margin-top: 10px;
}
</style>
